<template>
    <div class="inputInfo">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :label="eleInfo.componentName" name="first">
                <el-form
                        label-position="top"
                        label-width="100px"
                        style="max-width: 460px"
                >
                    <el-form-item label="组件名称：">
                        <el-input v-model="eleInfo.label"></el-input>
                    </el-form-item>
                    <el-form-item label="字段：">
                        <el-input v-model="eleInfo.key"></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-select v-model="eleInfo.type" placeholder="请选择类型">
                            <el-option
                                    label="input"
                                    value="input"
                            >
                            </el-option>
                            <el-option
                                    label="password"
                                    value="password"
                            >
                            </el-option>
                            <el-option
                                    label="number"
                                    value="number"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否必填：">
                        <el-radio-group v-model="eleInfo.rules.required">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="提示消息：">
                        <el-input v-model="eleInfo.rules.message"></el-input>
                    </el-form-item>
                    <el-form-item label="验证方式：">
                        <el-select v-model="eleInfo.rules.trigger" placeholder="请选择验证方式">
                            <el-option
                                    label="失焦"
                                    value="blur"
                            >
                            </el-option>
                            <el-option
                                    label="变化"
                                    value="change"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';

    export default defineComponent({
        name: 'inputInfo',
        props:{
           eleInfo:{
               type:Object
           }
        },
        setup() {
            const activeName = ref('first')
            const name = ref('')
            return {name,activeName};
        },
    });
</script>
